<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>统一地图平台</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #mapui {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .overlay {
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .overlay button {
            font: 600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            background-color: #3386c0;
            color: #fff;
            display: inline-block;
            margin: 0;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            border-radius: 3px;
        }

        .overlay button:hover {
            background-color: #4ea0da;
        }
    </style>
</head>

<body>

    <div id="mapui"></div>
    <div class="overlay">
        <button id="replay">重放</button>
    </div>
    <div class="overlay" style=" left: 105px;">
        <button id="pause">暂停</button>
    </div>
    <script src="./js_example/script/map.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    <script src="./js_thematic_map_example/script/turf/turf.min.js"></script>
    <script src="./js_thematic_map_example/script/jq/jquery.min.js"></script>



    <script>

        var amap = null;
        var that = this;
        var animateId = null;

        var points = [];
        var counter = 0
        var steps;
        var origin;
        var destination;
        var point;
        // 轨迹线
        var trackLine;



        $.get("./js_thematic_map_example/data/track.geojson", function (data) {
            points = turf.coordAll(data);

            steps = points.length - 1
            origin = points[0] // 起点
            destination = points[steps] // 终点
            point = turf.point(origin)
            // 轨迹线
            trackLine = {
                'type': 'Feature',
                'geometry': {
                    'type': 'LineString',
                    'coordinates': [origin]
                }
            }
        })

        map.Factory.create('mapui', {
            center: [106.573193, 29.558285],
            zoom: 14,
            fullExtent: {
                xmin: 90.992204,
                ymin: 10.979711,
                xmax: 120.5338915,
                ymax: 50.543712
            },
            projection: 'EPSG:4326',
            strategy: ['mapboxgl', 'openlayers'],
            style: style,
        }, (o) => {
            amap = o;
            that.init();
        });

        function init() {

            amap.pmap.loadImage('./js_thematic_map_example/images/redCar.png', function (error, image) {
                if (error) throw error;
                amap.pmap.addImage('car', image);
            });

            amap.pmap.loadImage('./js_thematic_map_example/images/arrow1.png', function (error, image) {
                if (error) throw error;
                amap.pmap.addImage('arrow', image);
            });

            amap.pmap.loadImage('./js_thematic_map_example/images/marker-icon.png', function (error, image) {
                if (error) throw error;
                amap.pmap.addImage('start', image);
                amap.pmap.addImage('end', image);
            });


            // 动态线
            amap.pmap.addSource('track-source', {
                'type': 'geojson',
                'data': trackLine
            })

            // 车点
            amap.pmap.addSource('point-source', {
                'type': 'geojson',
                'data': point
            })

            amap.pmap.addLayer({
                'id': 'track-line-layer',
                'type': 'line',
                'source': 'track-source',
                'paint': {
                    'line-width': 10,
                    'line-color': '#3d93fd'
                },
                'layout': {
                    'line-cap': 'round',
                    'line-join': 'round'
                }
            })

            amap.pmap.addLayer({
                'id': 'track-line-arrow-layer',
                'type': 'symbol',
                'source': 'track-source',
                'layout': {
                    'symbol-placement': 'line',
                    'symbol-spacing': 3,
                    'icon-image': 'arrow',
                    'icon-size': 0.5
                },
                'paint': {
                    'icon-opacity': 0.6
                }
            })

            amap.pmap.addLayer({
                'id': 'track-point-layer',
                'source': 'point-source',
                'type': 'symbol',
                'layout': {
                    'visibility': 'visible',
                    'icon-size': 3,
                    'icon-image': 'car',
                    'icon-rotate': ['get', 'bearing'],
                    'icon-rotation-alignment': 'map',
                    'icon-allow-overlap': true,
                    'icon-ignore-placement': true
                }
            })


            amap.pmap.addLayer({
                'id': 'point-layer',
                'type': 'symbol',
                'source': {
                    'type': 'geojson',
                    'data': turf.featureCollection([
                        turf.point(origin, { name: '行驶起点', icon: 'start' }),
                        turf.point(destination, { name: '行驶终点', icon: 'end' })
                    ])
                },
                'paint': {
                    'text-color': '#E86C48',
                    'text-halo-color': '#FFF',
                    'text-halo-width': 0.3,
                    'text-halo-blur': 0.3
                },
                'layout': {
                    'icon-size': 0.5,
                    'icon-image': ['get', 'icon'],
                    "icon-size": 1,
                    "icon-offset": [0, -15], //设置偏移量
                    'icon-anchor': 'bottom',
                    'text-anchor': 'bottom',
                    'text-size': 14,
                }
            })

            amap.pmap.on('click', 'point-layer', function (e) {
                popup = new mapboxgl.Popup({ maxWidth: 'none' });
                popup.setLngLat(e.lngLat.toArray())
                    .setHTML('<h3>' + e.features[0].properties.name + '</h3>')
                    .addTo(amap.pmap);
            })

            // 开始动画
            animate()


            document.getElementById('replay').addEventListener('click', function () {
                document.getElementById("pause").disabled = false;

                if (animateId) {
                    cancelAnimationFrame(animateId)
                }

                amap.pmap.setLayoutProperty('track-point-layer', 'visibility', 'visible')

                // 重置线坐标
                trackLine.geometry.coordinates = [origin]
                // 重置数据源
                amap.pmap.getSource('track-source').setData(trackLine)

                counter = 0;
                animate();
            });

             // 暂停按钮添加事件
             document.getElementById('pause').addEventListener('click', function () {
                var value = document.getElementById('pause').innerText
                if (value == '暂停') {
                    if (animateId) {
                        document.getElementById('pause').innerText = '恢复'
                        cancelAnimationFrame(animateId)
                    }
                } else if (value == '恢复') {
                    document.getElementById('pause').innerText = '暂停'
                    requestAnimationFrame(animate);
                }
            });
        }

        function animate() {
            var lnglat = points[counter]
            // 更新点坐标
            point.geometry.coordinates = lnglat
            // 计算 bearing
            point.properties.bearing = turf.bearing(
                turf.point(points[counter >= steps ? counter - 1 : counter]),
                turf.point(points[counter >= steps ? counter : counter + 1])
            )
            // 更新线坐标
            trackLine.geometry.coordinates.push(lnglat)
            // 更新数据源
            amap.pmap.getSource('track-source').setData(trackLine)
            amap.pmap.getSource('point-source').setData(point)
            // amap.pmap.panTo(lnglat)
            amap.pmap.easeTo({
                pitch: 60,
                zoom: 17,
                center: lnglat,
                bearing: point.properties.bearing,
            })

            if (counter < steps) {
                animateId =requestAnimationFrame(animate)
            } else {
                document.getElementById("pause").disabled = true;

                amap.pmap.setLayoutProperty('track-point-layer', 'visibility', 'none')
                amap.pmap.easeTo({
                    pitch: 0,
                    zoom: 13.5,
                    center: [106.573193, 29.558285],
                    bearing: 0
                });
            }
            counter++
        }

    </script>

</body>

</html>